<template>
    <div class="es-layout" @click.stop>
        <Header />
        <div class="dragerBox">
            <es-drager>
                <el-date-picker v-model="input" type="datetime" style="width: 100%" />
        </es-drager>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from './components/layout/Header.vue'

import { onMounted } from 'vue';
import { computed, ref } from 'vue'
const title = 'ES Drager Editor 开发中...'

//   const editorRef = ref<any>(null)
const editorRef = ref<any>(null)

const input = ref<any>(null)
// 初始数据
const data = ref<any>({
    container: {
        markline: {
            show: true,
            color: ''
        },
        snapToGrid: true,
        gridSize: 10,
        gridColor: '',
        style: {},
        scaleRatio: 1
    },
    elements: [
        {
            id: '1',
            component: 'input',
            width: 100,
            height: 30,
            left: 100,
            top: 100,
            text: '',
            style: {
                background: '#ff4500',
                color: '#fff'
            }
        },
        {
            id: '2',
            component: 'date',
            width: 100,
            height: 100,
            left: 300,
            top: 150,
            text: '',
            style: {
                background: '#00ced1',
                color: '#fff'
            }
        }
    ]
})

onMounted(() => {
    console.log(editorRef.value)
})
</script>

<style lang="scss" scoped>
.es-layout {
    width: 100%;
    height: 100%;
    color: var(--es-color);
    background-color: var(--es-color-bg);
    transition: background-color 0.2s;
    min-width: 1118px;

    .es-header-toolbar {
        position: absolute;
        top: 10px;
        right: 10px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .es-tool-btn+.es-tool-btn {
            margin-left: 10px;
        }
    }

    .dragerBox{
        height: calc(100% - 60px);
        background-color: #eee;
    }
}
</style>